<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script src="../jQuery/jquery.js" type="text/javascript"></script>
<title>simple spy</title>
<style>
body { font: 1em "Lucida Grande",Lucida,Verdana,sans-serif; font-size: 62.5%; line-height: 1;}
input, textarea { font-family: Arial; font-size: 125%; padding: 7px; }
label { display: block; } 
p{margin:0;margin-bottom:4px;}
h5{margin:0;font-weight:nomral;}
a:link,a:hover,a:visited{color:#fff;}
#sidebar{color:#afbob1;background:#0d171a;float:left;margin:0 0 24px;padding-left:8px;width:300px;}
#sidebar ul{font-size:1.2em;list-style-type:none;margin:0;padding:0;position:relative;}
.rating{background-image:url(../images/info_bar_stars.png);
background-repeat:no-repeat;height:12px;text-indent:-900em;font-size:1em;margin:0 0 9px;}
.none{background-position:82px 0px;}
.four{background-position:82px -48px;}
.five{background-position:82px -60px;}
.tags {
	color: #fff;
	margin: 0.5em;
}

.tags a,
.tags span {
	background-color: #333839;
	font-size: 0.8em;
	padding: 0.1em 0.8em 0.2em;
}

.tags a:link,
.tags a:visited {
	color: #fff;
	text-decoration: none;	
}

.tags a:hover,
.tags a:active {
	background-color: #3e4448;
	color: #fff;
	text-decoration: none;	
}

#sidebar li {
    height: 90px;
    overflow: hidden;
}

#sidebar li h5 {
    color:#A5A9AB;
    font-size:1em;
    margin-bottom:0.5em;
}

#sidebar li h5 a {
    color:#A5A9AB;
    text-decoration:none;
}

#sidebar li img {
    float:left;
    margin-right:8px;
}

#sidebar li .info {
    color:#3E4548;
    font-size:1em;
}

#sidebar .info a,
#sidebar .info a:visited {
    color:#3E4548;
    text-decoration: none;
}

#sidebar .spyWrapper {
    height: 100%;
    overflow: hidden;
    position: relative;    
}

#sidebar {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}

.tags span,
.tags a {
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
}

a img {
    border: 0;
}

</style>
</head>

<body>
<script>
$(function(){
	var limit = 4,items = [];
	var ul = $("ul.spy")
	var height = ul.find("> li:first").height()
	ul.find("> li").each(function(){
		items.push('<li>'+$(this).html()+'</li>')
	})
	var cur_item = limit,total = items.length;
	ul.wrap("<div id='out_box'/>").parent().css({height:limit*height,paddingTop:'5px'})
	ul.find('> li').filter(':gt('+(limit-1)+')').remove();
	function spy(){
		nxt_item = $(items[cur_item]).css({opacity:0,height:0,display:'none'}).prependTo(ul)
		ul.find('> li:last').animate({opacity:0},1000,function(){
			nxt_item.animate({height:height},1000).animate({opacity:1},1000);
			$(this).animate({height:0},1000,function(){
				$(this).remove();
			});
		});
		cur_item ++;
		if(cur_item>=total) cur_item=0;
		setTimeout(spy,4000)
	}
	spy();
});

</script>
	<h1>Simply Spy</h1>
	<div id="sidebar">
		<ul class="spy">
			<li>
				<a href="#" title="view round"><img width="70" height="70" src="../images/5.png" title="" /></a>
				<h5><a href="#" title="view round">round</a></h5>
				<p class="info">Nov 29th 2008 by <a href="#" title="visit neue's userpage">neue</a></p>
				<p class="rating none">Not Rated</p>
				<p class="tags"></p>
			</li>
			<li>

				<a href="#" title="View reflet"><img width="70" height="70" src="../images/5.png" title="" /></a>
				<h5><a href="#" title="View reflet">reflet</a></h5>
				<p class="info">Nov 29th 2008 by <a href="#" title="Visit neue's userpage.">neue</a></p>
	
				<p class='rating none'>Not Rated</p>
				<p class="tags"><a href="#" title='Find more images tagged Tactile'>Tactile</a></p>
			</li>
	
			<li>
	
				<a href="#" title="View Kate Moross Little Big Planet"><img width="70" height="70" src="../images/5.png" title="" /></a>
				<h5><a href="#" title="View Kate Moross Little Big Planet">Kate Moross Little Big Planet</a></h5>
	
				<p class="info">Nov 29th 2008 by <a href="#" title="Visit neue's userpage.">neue</a></p>
				<p class='rating four'>Four Stars</p>
				<p class="tags"><a href="#" title='Find more images tagged Kate Moross'>Kate Moross</a></p>
			</li>
	
			<li>
	
				<a href="#" title="View Untitled"><img width="70" height="70" src="../images/5.png" title="" /></a>
	
				<h5><a href="#" title="View Untitled">Untitled</a></h5>
				<p class="info">Nov 29th 2008 by <a href="#" title="Visit mike1052's userpage.">mike1052</a></p>
				<p class='rating none'>Not Rated</p>
				<p class="tags"></p>
			</li>
	
			<li>
	
				<a href="#" title="View My Tutorial's Library"><img width="70" height="70" src="../images/5.png" title="" /></a>
				<h5><a href="#" title="View My Tutorial's Library">My Tutorial's Library</a></h5>
				<p class="info">Nov 29th 2008 by <a href="#" title="Visit FrancescoOnAir's userpage.">FrancescoOnAir</a></p>
				<p class='rating five'>Five Stars</p>
				<p class="tags"></p>
	
			</li>

		</ul>
	</div>
</body>
</html>
